<template>
  <view class="container">
    <view class="banner" @click="jumpToHandler">
      温州理工学院<br />办事服务大厅上线啦
      <view class="btn">点击前往</view>
    </view>
		<view class="order" @click="handleOrder">
			我的工单
		</view>
    <view class="matter" v-for="item in categoryList" :key="item.categoryID">
      <view class="title">{{ item.category }}</view>
      <view>
        <view class="items" v-if="list.filter((i) => i.category === item.category).length !== 0">
          <view
            class="item"
            v-for="item in list.filter((i) => i.category === item.category)"
            :key="item.matterID"
            @click="handleJumpTo(item)"
          >
            <view style="font-size: 30rpx" class="t-icon" :class="'t-' + item.icon"></view>
            {{ item.matterName }}
          </view>
        </view>
        <view class="no-data" v-else> 暂无内容 </view>
      </view>
    </view>
  </view>
  <Loading />
</template>

<script setup>
  import { ref } from 'vue'
  import { GetMatterCategory, GetMatterList } from '@/apis/matter.js'
  import Loading from '@/components/Loading.vue'
  import { onBeforeMount } from 'vue'
  import { onPullDownRefresh } from '@dcloudio/uni-app'

  const categoryList = ref([])
  const list = ref([])

  onBeforeMount(() => {
    refresh()
  })

  function refresh() {
    GetMatterCategory().then((res) => {
      categoryList.value = res.data
    })
    GetMatterList().then((res) => {
      list.value = res.data
    })
  }
	
	function handleOrder(){
		uni.navigateTo({
			url: '/pages/onlineService/order/order'
		})
	}

  onPullDownRefresh(async () => {
    await refresh()
    await uni.stopPullDownRefresh()
  })

  function handleJumpTo(e) {
    uni.navigateTo({
      url: `/pages/onlineService/detail/detail?id=${e.matterID}`
    })
  }

  function jumpToHandler() {
    uni.navigateTo({
      url: `/pages/webview/webview?url=https://www.wzut.edu.cn/Col/Col2678/Index.aspx`
    })
  }
</script>

<style scoped lang="scss">
  .container {
    padding: 20rpx 40rpx;
    color: white;

    .banner {
      background: linear-gradient(to left, transparent, $my-wzut-icon-primary 70%), url('@/static/module3.jpg');
      background-size: contain;
      background-position: right top;
      background-repeat: no-repeat;
      // background: $my-wzut-icon-primary;
      font-family: SmileySans;
      border-radius: 20rpx;
      padding: 40rpx;
      height: 240rpx;
      font-size: 28rpx;
      line-height: 48rpx;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .btn {
        margin-top: 10rpx;
        border: 1px solid white;
        border-radius: 10rpx;
        padding: 4rpx;
        text-align: center;
        width: 150rpx;
      }
    }
		
		.order {
			background: linear-gradient(to left, transparent, $my-wzut-icon-primary 30%), url('@/static/module3.jpg');
			background-size: contain;
			background-position: right top;
			background-repeat: no-repeat;
			// background: $my-wzut-icon-primary;
			font-family: SmileySans;
			border-radius: 20rpx;
			padding: 40rpx;
			margin-top: 20rpx;
			height: 100rpx;
			font-size: 28rpx;
			line-height: 48rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

    .matter {
      margin-bottom: 20rpx;

      .title {
        padding: 20rpx 0;
        // font-weight: bold;
        font-size: 30rpx;
        color: #333;
        font-family: SmileySans;
      }

      .items {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        justify-content: space-between;
        align-items: center;
        gap: 20rpx;

        .item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          font-size: 24rpx;
          gap: 10rpx;
          color: #333;
          padding: 10rpx;

          &:active {
            filter: contrast(0.8);
            background-color: #ececec;
          }
        }

        .no-data {
          text-align: center;
          color: #333;
          font-size: 24rpx;
        }
      }
    }
  }
</style>
